<template>
  <div class="goods-comment-container auto-height-container">
    <vab-query-form>
      <!-- <vab-query-form-left-panel>
        <el-button :icon="Delete" type="danger" @click="handleDelete">删除</el-button>
      </vab-query-form-left-panel> -->
      <vab-query-form-right-panel>
        <el-form inline :model="queryForm" @submit.prevent>
          <el-form-item label="用户名称">
            <el-input v-model="queryForm.keyword" clearable placeholder="请输入用户名称" />
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" :loading="listLoading" native-type="submit" type="primary"
              @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table ref="tableRef" v-loading="listLoading" border :data="list">
      <el-table-column type="selection" width="38" />
      <el-table-column align="center" label="序号" width="55">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核ID" min-width="180" prop="_id" show-overflow-tooltip />
      <el-table-column align="center" label="标题" min-width="120" prop="title" show-overflow-tooltip sortable />
      <el-table-column align="center" label="发布时间" min-width="120" prop="createTime" show-overflow-tooltip sortable />
      <el-table-column align="center" label="审核状态" min-width="100">
        <template #default="{ row }">
          <el-tag effect="dark"
            :type="row.partnerAudit.status == 'pending' ? 'success' : row.partnerAudit.status == 'approved' ? 'warning' : 'info'">
            {{row.partnerAudit.status == 'pending' ? '待审核' : row.partnerAudit.status == 'approved' ? '审核成功' : '驳回'}}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="时间" min-width="160" prop="datetime" /> -->
      <el-table-column align="center" label="操作" width="150">
        <template #default="{ row }">
          <el-button text type="primary" @click="handleReview(row)"
            v-if="row.partnerAudit.status === 'pending'">审核</el-button>
          <el-button text type="primary" @click="handleDetails(row)">详情</el-button>
          <!-- <el-button text type="danger" @click="handleDelete(row)">删除</el-button> -->
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <vab-pagination :current-page="queryForm.page" :page-size="queryForm.pageSize" :total="total"
      @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    <el-dialog v-model="dialogVisible" title="动态" width="700">
      <el-form label-width="auto" style="max-width: 600px">
        <el-form-item label="id">
          <span>{{userDetails._id || ''}}</span>
        </el-form-item>
        <el-form-item label="标题">
          <span>{{userDetails.title || ''}}</span>
        </el-form-item>
        <el-form-item label="内容">
          <span>{{userDetails.describe || ''}}</span>
        </el-form-item>
        <el-form-item label="封面图">
          <div class="demo-image__preview">
            <el-image class="avatar" :src="userDetails.coverImage" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
              :preview-src-list="[userDetails.coverImage]" show-progress :initial-index="4" fit="cover" />
          </div>
        </el-form-item>
        <el-form-item label="内容图片或视频">
          <div class="demo-image__preview" v-for="(item,index) in userDetails.links" :key="index">
            <el-image class="avatar" :src="item" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
              :preview-src-list="userDetails.links" show-progress :initial-index="4" fit="cover" />
          </div>
        </el-form-item>
        <el-form-item label="审核备注" v-if="userDetails.partnerAudit.reviewNote">
          <span>{{userDetails.partnerAudit.reviewNote}}</span>
        </el-form-item>
        <el-form-item label="话题" v-if="userDetails.tags">
          <div class="flex gap-2" v-for="(item,index) in userDetails.tags" :key="index">
            <el-tag size="large" style="margin-right:5px;">#{{item.tag}}</el-tag>
          </div>

        </el-form-item>
        <el-form-item label="审核备注" v-if="type == 'Review' || userDetails.partnerAudit.status === 'pending'">
          <el-input v-model="reviewNote" style="width:80%;" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea"
            placeholder="请输入您的审核备注(审核通过无需填写,审核拒绝必填)" />
        </el-form-item>
      </el-form>
      <template #footer v-if="userDetails">
        <div class="dialog-footer" v-if="type == 'Review' || userDetails.partnerAudit.status === 'pending'">
          <el-button @click="confirm('rejected')">审核拒绝</el-button>
          <el-button type="primary" @click="confirm('approved')">
            审核通过
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { Delete, Search } from '@element-plus/icons-vue'
  import { doDelete } from '/@/api/goodsComment'
  import { getDynamicsLists, getDynamicsDetails, dynamicsReview } from '/@/api/newPagesApi'

  defineOptions({
    name: 'GoodsComment',
  })

  const $baseConfirm = inject<any>('$baseConfirm')
  const $baseMessage = inject<any>('$baseMessage')
  const editRef = ref<any>(null)
  const tableRef = ref<any>(null)
  const list = ref<any>([])
  const listLoading = ref<boolean>(true)
  const total = ref<any>(0)
  const type = ref<any>('')
  const rowObject = ref<any>({})
  const reviewNote = ref<any>('')
  const dialogVisible = ref(false)
  const userDetails = ref<any>({})
  const queryForm = reactive<any>({
    keyword: '',
    status: '',//pending/approved/rejected
    page: 1,
    pageSize: 20,
  })

  const fetchData = async () => {
    listLoading.value = true
    const { data } = await getDynamicsLists(queryForm)
    list.value = data.data
    total.value = data.total
    listLoading.value = false
  }

  const handleSizeChange = (value : number) => {
    queryForm.page = 1
    queryForm.pageSize = value
    fetchData()
  }

  const handleCurrentChange = (value : number) => {
    queryForm.page = value
    fetchData()
  }

  const queryData = () => {
    queryForm.page = 1
    fetchData()
  }

  //获取动态详情
  const handleDetails = async (row = {}) => {
    try {
      if (!row._id) $baseMessage('用户id为空！', 'error', 'hey')

      const { data } = await getDynamicsDetails({ id: row._id });

      userDetails.value = data;
      dialogVisible.value = true;
    } catch (err) {
      console.log(err);
    }
  }

  //开始审核
  const confirm = async (e : any) => {
    try {

      if (userDetails.value._id) {
        $baseConfirm(`您确定要${e == 'rejected' ? '审核拒绝' : '审核通过'}当前项吗`, null, async () => {
          const { message } : any = await dynamicsReview({
            userid: userDetails.value.userid,
            id: userDetails.value._id,
            status: e,
            reviewNote: reviewNote.value
          })
          $baseMessage(message, 'success', 'hey')
          await fetchData()
        })
      }
      dialogVisible.value = false;
    } catch (err) {
      console.log(err);
    }
  }

  //审核搭子
  const handleReview = (row = {}) => {
    try {
      handleDetails(row);
      type.value = 'Review';
    } catch (err) {
      console.log(err);
    }
  }

  const handleDelete = (row : any) => {
    if (row.id) {
      $baseConfirm('您确定要删除当前项吗', null, async () => {
        const { msg } : any = await doDelete({ ids: row.id })
        $baseMessage(msg, 'success', 'hey')
        await fetchData()
      })
    } else {
      if (selectRows.value.length > 0) {
        const ids = selectRows.value.map((item : { id : any }) => item.id).join()
        $baseConfirm('您确定要删除选中项吗', null, async () => {
          const { msg } : any = await doDelete({ ids: ids })
          $baseMessage(msg, 'success', 'hey')
          await fetchData()
        })
      } else {
        $baseMessage('您未选中任何行', 'warning', 'hey')
      }
    }
  }

  onActivated(() => {
    tableRef.value.doLayout()
  })

  onBeforeMount(() => {
    fetchData()
  })
</script>
<style scoped>
  .avatar {
    width: 110px;
    height: 110px;
    display: block;
    margin-right: 10px;
    border-radius: 5px;
  }

  .demo-image__error .image-slot {
    font-size: 30px;
  }

  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }

  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
</style>
